<script setup lang="ts">
import { ElMessage, ElMessageBox, FormInstance } from 'element-plus';
import { ClassroomAPI } from '@/api';
import { markRaw, reactive, ref, onMounted, nextTick } from 'vue';

const classroomList = ref<Vm.classroom[]>(markRaw([]));
const model = reactive({ clsr_name: "", clsr_id: 0, clsr_occupy: 0 });
const isEdit = ref<boolean>(false);
const formLabelWidth = '80px';

const formRef = ref<FormInstance | null>(null);
//定制表单校验规则
const rules = {
    clsr_name: [
        { required: true, message: '*教室名不能为空', trigger: "blur" },
        { min: 3, max: 20, message: '*教室名长度3 - 20', trigger: "blur" }
    ]
}

onMounted(async () => {
    try {
        const list = await ClassroomAPI.all();
        classroomList.value = list;
    } catch (e) { console.log(e) }
});

const add = () => {
    //去除残留
    formRef.value?.resetFields();

    model.clsr_id = 0;
    model.clsr_name = "";
    model.clsr_occupy = 0;
    nextTick(() => isEdit.value = true);
}

const update = (item: HttpPayload.classroom) => {
    model.clsr_id = item.clsr_id;
    model.clsr_name = item.clsr_name;
    model.clsr_occupy = item.clsr_occupy;
    nextTick(() => isEdit.value = true);
};

const remove = async (classroom: Vm.classroom) => {
    await ElMessageBox.confirm(
        `确定删除"${classroom.clsr_name}"`,
        "Tip",
        {
            showClose: false,
            type: 'warning',
            confirmButtonText: '确定',
            cancelButtonText: '取消',
        });
    await ClassroomAPI.remove(classroom.clsr_id);
    const i = classroomList.value.findIndex(item => item.clsr_id === classroom.clsr_id);
    classroomList.value.splice(i, 1);
    ElMessage({ message: `"${classroom.clsr_name}"删除成功！`, type: 'success' });
}
const save = async () => {
    try {
        if (model.clsr_id === 0) {
            await ClassroomAPI.add(model);
            classroomList.value.push({
                clsr_id: model.clsr_id,
                clsr_name: model.clsr_name,
                clsr_occupy: 0
            });
            ElMessage({ message: `${model.clsr_name}添加成功！`, type: 'success' });
        } else {
            await ClassroomAPI.update(model);
            const i = classroomList.value.findIndex(item => item.clsr_id === model.clsr_id)
            classroomList.value.splice(i, 1, {
                clsr_id: model.clsr_id,
                clsr_name: model.clsr_name,
                clsr_occupy: 0
            });
            ElMessage({ message: `${model.clsr_name}编辑成功！`, type: 'success' });

        }
        isEdit.value = false;
    } catch (e) { console.log(e) }
}
</script>

<template>
    <el-header>
        <div class="header-l">
            <span class="cir"></span>
            <span class="headtext">空闲</span>
        </div>
        <div class="header-r">
            <span class="circ"></span>
            <span class="headtext">使用中</span>
        </div>
    </el-header>
    <el-main>
        <el-row>
            <el-col :span="28">
                <div v-for="item in classroomList">
                    <div class="orgin" v-if="item.clsr_occupy === 0">
                        <el-icon>
                            <DataLine />
                        </el-icon>
                        <span class="text" v-text="item.clsr_name"></span>
                        <div class="new">
                            <el-icon>
                                <Edit @click="update(item)">
                                </Edit>
                            </el-icon>
                            <el-icon>
                                <Delete @click="remove(item)" />
                            </el-icon>
                        </div>
                    </div>
                    <div class="occpy" v-else>
                        <el-icon>
                            <DataLine />
                        </el-icon>
                        <span class="text" v-text="item.clsr_name"></span>
                        <div class="new">
                            <el-icon>
                                <Edit @click="update(item)">
                                </Edit>
                            </el-icon>
                        </div>
                    </div>
                </div>
                <div class="add" @click="add">
                    <el-icon size="30px">
                        <Plus />
                    </el-icon>
                </div>
            </el-col>
        </el-row>
    </el-main>
    <el-dialog :model-value="isEdit" title="功能修改" width="30%" draggable>
        <el-form ref="formRef" :model="model" :rules="rules" status-icon>
            <el-form-item prop="clsr_name" label="班级名称" :label-width="formLabelWidth">
                <el-input v-model="model.clsr_name" autocomplete="on" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="isEdit = false">取消</el-button>
                <el-button type="primary" @click="save">保存</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<style scoped>
.el-header {
    display: flex;
    height: 20px;
}

.header-l {
    display: flex;
    align-items: center;
    margin: 0 20px;
}

.cir {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #67c23a;
}

.headtext {
    font-size: 16px;
    margin-left: 10px;
}

.header-r {
    display: flex;
    align-items: center;
    margin: 0 20px;
}

.circ {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #e6a23c;
}

.el-main {
    width: 1530px;
    padding: 20px;
    box-sizing: border-box;
}

.el-row {
    width: 1450px;
}

.el-col {
    display: flex;
    flex-wrap: wrap;
}

.orgin {
    width: 350px;
    height: 120px;
    padding: 20px;
    box-sizing: border-box;
    margin-right: 20px;
    margin-bottom: 20px;
    border-radius: 10px;
    background-color: #67c23a;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.occpy {
    width: 350px;
    height: 120px;
    padding: 20px;
    box-sizing: border-box;
    margin-right: 20px;
    margin-bottom: 20px;
    border-radius: 10px;
    background-color: #e6a23c;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.new {
    width: 350px;
    height: 120px;
    padding: 20px;
    margin-right: 20px;
    box-sizing: border-box;
    border-radius: 10px;
    background-color: #000;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.new:hover {
    opacity: 0.7;
    color: #fff;
}

.el-icon {
    margin-right: 15px;
    font-size: 25px;
    vertical-align: bottom;
}

.hovor {
    background-color: #757F89;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 358px;
    height: 120px;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 10px;
    margin-right: 20px;
}

.text {
    font-size: 20px;
}

.add {
    width: 350px;
    height: 120px;
    padding: 20px;
    box-sizing: border-box;
    margin-right: 20px;
    border-radius: 10px;
    background-color: #fff;
    color: #67c23a;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 10px 1px rgb(223, 219, 219);
}
</style>